<template>
  <div>
     <div class="file-menu">
    <div class="file-nav"><a class="current">图片上传</a><a>视频上传</a></div>
     </div>
  <el-upload
    ref="uploadRef"
    class="upload-el"
    action="http://wh011024.mysh360.com/FileServSystemMgt/FileUpload"
    :auto-upload="false"
    :data="reqData"
    :on-change="handleChange" 
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError" style="width: 480px;">
    <template #trigger><el-button type="primary">select file</el-button></template>
    <el-button class="ml-3" type="success" @click="submitUpload">upload to server</el-button>
    <!-- <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template> -->
  </el-upload>
  <div class="load_fetch">  
    <!-- <div class="upload-file"><input type="file" id="fileLoad"><span>选择文件</span></div> -->
    <input type="file" id="fileLoad">
    <button @click="submitUpload2">点击上传</button>
  </div>
  <div class="showImage">
   <div class="imgItem" v-for="imgItem in fileList" :key="imgItem.FN010" v-loading="loading">
    <img :src="imgItem.RL02Main.replace('PlaceholderColon',':').replace('https','http')" alt="">
    <div class="imgInfo"> 
      <span>{{imgItem.FN010}}</span>
      <div class="imgHandel">
        <input type="checkbox" :id="imgItem.FN010"> 
        <span> <label :for="imgItem.FN010">插入富文本</label>
        <label :for="imgItem.FN010" @click="handelDealImgitem(imgItem)">删除</label>
      </span>
    </div>
    </div>
   </div>
  </div>
  </div>
</template>
<script  setup>
import { ref ,getCurrentInstance, onMounted} from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const {proxy}=getCurrentInstance();
let fileList=ref([]),isClientCertFile=ref(true);
const loading = ref(true)
//定义参数
const uploadRef = ref(null);
const accessToken = window.localStorage.getItem("AccessToken");
const jsonCurrentDataGroup = JSON.parse(window.sessionStorage.getItem('CurrentDataGroup'));
const primaryKey=proxy.$route.query.StrPrimaryKey;
let reqData={
CurrentDataGroup: jsonCurrentDataGroup,
StrPrimaryKey: primaryKey,
FileType: 'ImageFile',
AccessToken:accessToken
}
//el-plus文件上传
let imgFile=ref([])
const submitUpload = () => {
if(isClientCertFile.value){//判断文件非空
  ElMessage({type: 'warning',message: '请上传证书文件'});
  return
}
  uploadRef.value.submit();
}
const  handleChange=(file, fileList)=>{
  console.log(file);
  imgFile.value["file"]= fileList
  if(imgFile.value.file!= "undefined" && imgFile.value.file.length > 0){
    isClientCertFile.value=false;
  }else{
    isClientCertFile.value=true;
  }
}
const handleRemove=()=>{
  isClientCertFile.value= true;
}
const handleSuccess=()=>{
  ElMessage({type: 'success',message: '文件上传成功'});
  imgUploadShow();
}
const handleError=()=>{
  ElMessage({type: 'warning',message: '文件上传失败'});
}

//初始页面
imgUploadShow()
//原生fetch方式上传
const submitUpload2 = () => {
  const fileUploadInner=document.querySelector('#fileLoad');
  const formData = new FormData();
  console.log(fileUploadInner.files.length);
  if(fileUploadInner.files.length>0){
    formData.append("file",fileUploadInner.files[0]);
    formData.append("CurrentDataGroup",jsonCurrentDataGroup);
    formData.append("StrPrimaryKey",primaryKey);
    formData.append("AccessToken",accessToken);
    formData.append("FileType",'ImageFile');
    fetch('http://wh011024.mysh360.com/FileServSystemMgt/FileUpload',{
    method:'post',
    body:formData,
  })
   .then((resResult)=>{
    if(resResult.ok){
       return resResult.text()
    }else{
      return 'uploadFail'
    }})
    .then((resResultStr)=>{ 
      if(resResultStr!=='uploadFail'){
        let jsonRerult=JSON.parse(resResultStr);
        if(jsonRerult.StatusCode==='SuccLocal'){
             imgUploadShow();
             setTimeout(()=>{ ElMessage({type: 'success',message: '文件上传成功', })},1500)}
         }else{alert('网络请求错误')}
   })
}else{
  ElMessage({
        type: 'warning',
        message: '请上传证书文件',
      })
}}

//图片页面渲染
function imgUploadShow(){
 proxy.$HelperAxios.post('http://wh011024.mysh360.com/FileServSystemMgt/FileList',{StrPrimaryKey:primaryKey,FileType:'ImageFile'}
  ).then((request)=>{
    if (request.status === 200) {
        if (request.data.StatusCode ==="SuccGoal") {
          loading.value=false;
          fileList.value=request.data.Payload;
        }}else{
          alert('请求失败')
        }
  })
}

//删除
function handelDealImgitem(imgItem){
  ElMessageBox.confirm(
    'Do you want to delete?',
    'Warning',
    {
      confirmButtonText: 'Yes',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  ).then(() => {
      ElMessage({
        type: 'success',
        message: 'delete completed',
      })
      proxy.$HelperAxios.post('http://wh011024.mysh360.com/FileServSystemMgt/DelFileSingle',{StrPrimaryKey:primaryKey,FileType:'ImageFile',FileName:imgItem.FN010}
      ).then((request)=>{
       if (request.status === 200) {
         if (request.data.StatusCode ==="SuccGoal") {
           imgUploadShow()
        }}else{alert('请求失败')}
     }).catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled'
      })
    })
    })
}
//返回
const handleGoBack = ()=>{

}
</script>
<style scoped>
label{
  cursor: pointer;
}
.upload-el,.load_fetch{
  padding:20px;
}
.load_fetch{
  padding-top: 0;
}
.showImage{
  display: flex;
  flex-wrap: wrap;
}
.imgItem{
  width: 402px;
  height: 312px;
  border: 1px solid #eff2f5;
  margin: 20px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
.imgItem img{
  width: 400px;
  height: 240px;
}
.imgInfo{
  height: 60px;
  padding:3px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.imgHandel{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.imgHandel label{
  margin-left: 10px;
}
.file-menu{
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #eff2f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.file-nav a{
  margin-right: 20px;
  padding:13px ;
  color: black;
}
.file-nav{
  display: flex;
  align-items: center;
  /* height: 50px; */
  font-size:20px;
  font-weight: 700;
}
.current{
  border-bottom: 3px solid #fbc424;
}
.el-button{
  margin-right: 20px;
}
#file-upload-button{
  background-color: #00a0ff;
}
.load_fetch{
  display: flex;
  align-items: center;
}
.load_fetch button{
  padding: 1px 6px;
}
/* .load_fetch button{
  background-color: #67c23a;
  color: #fff;
  border: 1px solid #67c23a ;
  padding: 6px 15px;
  border-radius: 5px;
  margin-left: 20px;
}
.load_fetch button:hover{
  background-color: #7fd67b;
  border: 1px solid #fff ;
} */
.upload-file{
  position: relative;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #409eff ;
  background-color: #409eff;
  border-radius: 5px;
  color: #fff;
}
.upload-file:hover{
  background-color: #59bdff;
  border: 1px solid #fff ;
}
.upload-file>input{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
</style>